<template>
  <div>
    对话框
    <el-button type="button" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <button @click="open">alert</button>
    <button @click="openMessage">message</button>

      <!--
        v-model.number="number"
        @click.stop="xxxx"

        async:异步, ajax

        sync:同步

        :visible.sync="dialogVisible" -->

    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <h1>xxxxx</h1>
      <span>这是一段信息</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>

      </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    openMessage () {
      console.log(this)
      this.$message({
        type: 'success ',
        message: `月薪15K`
      })
    },
    open () {
      this.$alert('你真的要走吗？', '系统提示', {
        confirmButtonText: '确认',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          })
        }
      })
    },
    handleClose (done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => {})
    }
  }
}
</script>
